<template>
    <div>
        <div style="margin-bottom: 30px">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item>新闻后台管理</el-breadcrumb-item>
                <el-breadcrumb-item>新闻列表</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <el-form :inline="true" :model="searchForm">
            <el-form-item label="新闻发布状态:">
                <el-select v-model="searchForm.isrelease" value-key="id" placeholder="选择发布状态">
                    <el-option label="已发布" value="1"></el-option>
                    <el-option label="未发布" value="0"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="getNewList">搜索</el-button>
                <el-button type="warning" @click="reset">重置</el-button>
            </el-form-item>
        </el-form>
        <el-table
                :data="tableData"
                border
                style="width: 100%">
            <el-table-column
                    prop="id"
                    label="新闻编号"
                    width="180">
            </el-table-column>
            <el-table-column
                    prop="createtime"
                    label="创建时间"
                    width="180">
                <template v-slot="scope">
                    {{ scope.row.createtime | filtertime }}
                </template>
            </el-table-column>
            <el-table-column
                    prop="newtitle"
                    label="新闻标题"
                    width="180">
                <template v-slot="scope">
                    <!-- tips悬浮提示 -->
                    <el-tooltip
                            placement="top"
                            v-model="scope.row.showTooltip"
                            :open-delay="500"
                            effect="dark"
                            :disabled="!scope.row.showTooltip">
                        <div slot="content">{{ scope.row.newtitle }}</div>
                        <div @mouseenter="showTips($event,scope.row)" class='myNote'>{{ scope.row.newtitle }}</div>
                    </el-tooltip>
                </template>
            </el-table-column>
            <el-table-column
                    prop="newclass"
                    label="新闻分类">
            </el-table-column>
            <el-table-column
                    prop="ishot"
                    label="是否热门">
                <template v-slot="scope">
                    <el-switch v-model="scope.row.ishot" active-color="#13ce66" inactive-color="#ccc"
                               @change="changeEnable(scope.row)"></el-switch>
                </template>
            </el-table-column>
            <el-table-column
                    align="center"
                    prop="newimg"
                    label="新闻封面">
                <template v-slot="scope">
                    <el-image
                            style="width: 60px; height: 60px;border-radius: 10px"
                            :src="scope.row.newimg"
                            :preview-src-list="[scope.row.newimg]">
                    </el-image>
                </template>
            </el-table-column>
            <el-table-column label="新闻详情" align="center">
                <template v-slot="scope">
                    <el-button type="primary" size="small" @click="details(scope.row)">查看详情</el-button>
                </template>
            </el-table-column>
            <el-table-column
                    prop="isrelease"
                    align="center"
                    label="是否发布">
                <template v-slot="scope">
                    <el-tag type="success" v-if="scope.row.isrelease==true">已发布</el-tag>
                    <el-tag type="danger" v-else>未发布</el-tag>
                </template>
            </el-table-column>
            <el-table-column label="操作" width="300" align="center">
                <template v-slot="scope">
                    <el-button
                            type="primary"
                            style="margin-left: 15px"
                            icon="el-icon-edit"
                            circle
                            slot="reference"
                            @click="edit(scope.row)"
                    ></el-button>
                    <el-popconfirm
                            class="ml-5"
                            confirm-button-text="确定"
                            cancel-button-text="我再想想"
                            icon="el-icon-info"
                            icon-color="red"
                            title="您确定删除吗？"
                            @confirm="del(scope.row.id)"
                    >
                        <el-button
                                type="danger"
                                style="margin-left: 15px"
                                icon="el-icon-delete"
                                circle
                                slot="reference"
                        ></el-button>
                    </el-popconfirm>

                </template>
            </el-table-column>
        </el-table>
        <div style="padding: 10px 0">
            <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="pageNum"
                    :page-sizes="[2, 4, 6]"
                    :page-size="pageSize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="total"
            >
            </el-pagination>
        </div>
        <el-drawer
                title="新闻详情"
                :visible.sync="drawer"
                @close="drawerClose"
        >
            <div class="nescontent">
                <h1 style="font-size:23px;">{{ drawerFrom.newtitle }}</h1>
                <el-image style="width: 550px; height: 300px;margin-left: 8px;" :src="drawerFrom.newimg">
                </el-image>
                <p v-html="drawerFrom.newcontent"></p>
            </div>
        </el-drawer>
        <el-dialog title="修改新闻" :visible.sync="dialogFormVisible" width="60%">
            <el-form label-width="80px" size="small">
                <el-form-item label="新闻标题">
                    <el-input v-model="form.newtitle" autocomplete="off"></el-input>

                </el-form-item>
                <el-form-item label="新闻分类">
                    <el-select v-model="form.newclass" class="full-width-input" clearable placeholder="请选择新闻分类">
                        <el-option v-for="(item, index) in newclass" :key="index" :label="item.label"
                                   :value="item.label" :disabled="item.disabled"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="发表媒体">
                    <el-input v-model="form.newauthor" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="新闻内容" prop="newcontent" class="required">
                    <!--        <el-input type="textarea" v-model="formData.newcontent" placeholder="请输入新闻内容" rows="12"></el-input>-->
                    <quill-editor v-model="form.newcontent"></quill-editor>
                </el-form-item>
                <el-form-item label="是否热门">
                    <el-switch
                            v-model="form.ishot"
                    >
                    </el-switch>
                </el-form-item>
                <el-form-item label="新闻封面" prop="newimg" class="required">
                    <el-upload
                        class="avatar-uploader"
                        action="http://localhost:8082/file/upload"
                        :show-file-list="false"
                        :on-success="handleAvatarSuccess"
                    >
                        <img v-if="form.newimg" :src="form.newimg" class="avatar">
                        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                    </el-upload>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="cancel">取 消</el-button>
                <el-button type="primary" @click="save">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import {searchNews, deleteNews, addOrUpdateNews} from '@/api/News'
import moment from "moment/moment";
import {getCategoryList} from "@/api/Category";

export default {
    data() {
        return {
            newclass: [],
            newimg: null,
            form: {},
            dialogFormVisible: false,
            drawer: false,
            searchForm: {},
            total: 0,
            pageNum: 1,
            pageSize: 6,
            tableData: [],
            drawerFrom: {}
        }
    },
    filters: {
        filtertime(value) {
            return moment(value).format('YYYY-MM-DD HH:mm:ss');
        },
    },

    created() {
        this.getNewList();
    },
    methods: {
        cancel() {
            this.form = {};
            this.dialogFormVisible = false;
        },
        getNewclass() {
            getCategoryList().then((res) => {
                console.log(res);
                this.newclass = res;
            });
        },
        handleAvatarSuccess(res) {
            this.form.newimg=res
            // this.newimg
        },
        async save() {
            console.log(this.form)
            const res = await addOrUpdateNews(this.form)
            console.log(res)
            if (res == true) {
                this.$message.success('修改成功');
                this.dialogFormVisible = false;
                this.getNewList();
            }
        },
        edit(row) {
            this.getNewclass();
            this.form=Object.assign({},row);

            // this.newimg=this.form.newimg;
            this.dialogFormVisible = true;
        },
        showTips(obj, row) {
            let TemporaryTag = document.createElement('span');
            TemporaryTag.innerText = row.newtitle;
            TemporaryTag.className = 'getTextWidth';
            document.querySelector('body').appendChild(TemporaryTag);
            let currentWidth = document.querySelector('.getTextWidth').offsetWidth;
            document.querySelector('.getTextWidth').remove();
            const cellWidth = obj.target.offsetWidth
            currentWidth <= (2 * cellWidth) ? row.showTooltip = false : row.showTooltip = true
        },
        drawerClose() {
            this.drawerFrom = {}
        },
        details(row) {
            this.drawer = true
            row.newcontent = row.newcontent.replace(/<img/g, '<img style="max-width: 100%;"');
            this.drawerFrom = row
            console.log(this.drawerFrom)
        },
        reset() {
            this.searchForm = {};
            this.getNewList();
        },
        getNewList() {
            console.log(this.searchForm.isrelease)
            searchNews(
                this.pageNum,
                this.pageSize,
                this.searchForm.isrelease,
            ).then(res => {
                console.log(res);
                this.tableData = res.records;
                this.total = res.total;
            });
        },
        changeEnable(row) {
            addOrUpdateNews(row).then(res => {
                if (res) {
                    this.$message.success('操作成功');
                } else {
                    this.$message.error('操作失败');
                }
            })
        },
        del(id) {
            deleteNews(id).then(res => {
                if (res) {
                    this.$message.success("删除成功");
                    this.getNewList();
                } else {
                    this.$message.error("删除失败");
                }
            });
        },
        handleSizeChange(pageSize) {
            console.log(pageSize);
            this.pageSize = pageSize;
            this.getNewList();
        },
        handleCurrentChange(pageNum) {
            console.log(pageNum);
            this.pageNum = pageNum;
            this.getNewList();
        },
    },


}
</script>

<style>
.myNote {
    display: -webkit-box;
    text-overflow: ellipsis;
    overflow: hidden;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.nescontent {
    margin: 0 20px 0 20px;
}

p {
    font-size: 17px;
}
.avatar {
    width: 240px;
    height: 140px;
    display: block;
}

</style>
